﻿@model CompanyManagementDLL.MetaData.UserData

<html class="bg-black">
<head>
    <meta charset="UTF-8">
    <title>Log in</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
    <!-- Theme style -->
    <link type="text/css" rel="stylesheet" href="../../css/AdminLTE.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
</head>
<body class="bg-black">

    <div id="login-box" class="form-box">
        <div class="header">Sign In</div>
        <form method="post">
            <div class="body bg-gray">
                <div style="color: red">
                    @Html.ValidationSummary()
                </div>
                <div class="form-group">
                    @Html.TextBoxFor(model => model.UserName, new { placeholder = "User Name", @class = "form-control" })
                </div>
                <div class="form-group">
                    @Html.TextBoxFor(model => model.Password, new { placeholder = "Password", @class = "form-control", type = "password" })
                </div>
                <div class="form-group">
                    @Html.CheckBoxFor(model => model.RememberMe)
                    Remember me
               
                </div>
            </div>
            <div class="footer">
                <button class="btn bg-olive btn-block" type="submit">Sign me in</button>

                <p><a href="#" id="forgetpassword">I forgot my password</a></p>
            </div>
        </form>
    </div>

    <div id="password-box" class="form-box" style="display: none">
        <div class="header">Forget Password</div>
        <div class="body bg-gray">
            <div class="form-group" id="emailAddress">
                <input type="text" placeholder="Enter Email Address" class="form-control" id="emailid" />
                <div id="error" style="display:none;color:red;margin-left:2%">
                   
                </div>
            </div>
        </div>
        <div class="footer">
            <button class="btn bg-olive btn-block" type="submit" id="getpassword">Get Password</button>
            <p><a href="#" id="backlogin">Back to Login</a></p>
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script>
        $("#getpassword").click(function () {
            var emailid = $("#emailid").val();
            if (emailid != '') {
                $("#error").hide();
                $.ajax({
                    url: "/Login/GetPassword?emailid=" + emailid,
                    success: function (data) {
                        if (data == "Invalid Email Address.") {
                            $("#error").html(data);
                            $("#error").show();
                        }
                        else {
                            alert("Your password is : " + data);
                        }
                    }
                });
            }
            else {
                $("#error").html("Emil Address is Required.");
                $("#error").show();
            }
        });
        $("#forgetpassword").click(function () {
            $("#login-box").toggle();
            $("#password-box").toggle();
        });
        $("#backlogin").click(function () {
            $("#login-box").toggle();
            $("#password-box").toggle();
        });
    </script>
</body>
</html>
